<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/common/head.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>待我审批</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="${resource }/css/bootstrap.css" />
		<link rel="stylesheet" href="${resource }/css/iconfont.css" />
		<script src="${resource }/js/jquery-2.1.1.min.js"></script>
		<script src="${resource }/js/jquery.form.js"></script>
		<script src="${resource }/js/bootstrap.min.js?v=3.4.0"></script>
	</head>

	<body>
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-sm-4">
				<h2>我的流程</h2>
				<ol class="breadcrumb">
					<li>
						<a href="index.html">主页</a>
					</li>
					<li>
						<strong>待我审批</strong>
					</li>
				</ol>
			</div>
		</div>
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-md-12">
				<!-- 流程列表--bootstrap高级表格使用 -->
				<div class="panel panel-default">
					<div class="panel-heading">
						流程列表
					</div>
					<div class="panel-body">
						<!--table-responsive响应式表格，会自动添加滚动条-->
						<div class="table-responsive">
							<table class="table">
								<thead>
									<tr class="gradeX">
										<th>流水号</th>
										<th>流程名</th>
										<th>申请人</th>
										<th>申请日期</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
								<c:forEach items="${list}" var="list">
									<tr class="odd gradeC">
										<td>${list.id}</td>
										<td>${list.workflow.workflowName}</td>
										<td>${list.user.userName}</td>
										<td>${list.date}</td>
										<td>
											<a title="审核通过" class="t-edit" onclick="approvalok('${list.id}','1')"><i class="iconfont icon-pass-1-copy"></i></a>
											<a title="审核不通过" data-toggle="modal" class="t-edit" href="myApproval.jsp#modal-form2" onclick="nopass('${list.id}','${list.workflow.workflowName}')"><i class="iconfont icon-notpass-1-copy"></i></a>
										</td>
									</tr>
								</c:forEach>
								</tbody>
							</table>
						</div>

						<!--分页显示-->
						<div class="row">
							<div class="col-md-6">
								<div class="pagination" style="margin: 0px;" role="alert" aria-live="polite" aria-relevant="all">显示 1 到 ${detail.getPages()} 页 记录数${detail.getTotal()}</div>
							</div>
							<!-- 动态分页 -->
							<div class="row">
							<div id="page" class="col-md-6" style="text-align: right;float:right;" ></div>
							</div>
						</div>
						<!--分页显示-->
					</div>
				</div>
				<!--表格结束 -->
			</div>

		</div>
		<div id="modal-form2" class="modal fade" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<div class="row">
							<div class="col-sm-12 b-r">
								<h3 class="m-t-none m-b">审核意见</h3>
									<div class="form-group">
										<label>流水号：</label>
										<input id="detailid" name="id" type="text" class="form-control" readonly="readonly">
										<label>流程名：</label>
										<input id="workflowName" name="workflowName" type="text" class="form-control" readonly="readonly">
										<label>未通过原由：</label>
										<input id="detailRemark" name="detailRemark" type="text" class="form-control">
										<input id="flag" name="flag" type="hidden" value="0">
									</div>
								<div align="center">
									<button onclick="return editok()">提交</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Mainly scripts -->
		<script src="${resource }/js/jquery-2.1.1.min.js"></script>
		<script src="${resource }/js/bootstrap.min.js?v=3.4.0"></script>
		<!-- 分页插件，依赖于jquery位于jquery之后 -->
		<script src="${resource }/js/page.js"></script>
	</body>
	<script>
		function nopass(x,y) {
			$("#detailid").attr("value", x);
			$("#workflowName").attr("value", y);
		}
		function flow_detail(x) {
			alert(x);
			window.location.href = "";
		}
		function approvalok(x,y) {
			var rs=confirm("您确定通过该审核申请吗？");
			if (rs) {
				//alert(x+y);
				$.ajax({
					type:'POST',
					data:{"id":x,"flag":y},
					url:'approvalstep.do',
					success:function(data){
						if (data!="0") {
							window.location.href="myapproval.do?id="+data;
						} else {
							alert("操作失败!");
						}
					}
				}) 
			}
		}
		function editok() {
			var detailRemark = document.getElementById("detailRemark").value;
			var detailid = document.getElementById("detailid").value;
			if(detailRemark != null && detailRemark != "") {
				$.ajax({
					type: 'POST',     // 设置表单提交方式
			        dataType: 'json', 
			        url: 'approvalstep.do?flag=0',    // 设置表单提交URL,默认为表单Form上action的路径
			        data:{"id":detailid,"detailRemark":detailRemark},
			        success: function(data){
			            if (data!="0") {
			                window.location.href="myapproval.do?id="+data;
			            } else {
			                alert("操作失败!");    // 成功访问地址，并成功返回数据，由于不符合业务逻辑的失败
			            }
			        }  
				})
			} else {
				alert("原由不能为空哦！");
				return false;
			}
		}
		
	</script>
	<script >
	$(function(){
			/* 分页插件使用 */
			$("#page").page({/* #page是分页条div的id，调用分页插件page.js中封装的page函数*/
				pageNo:${detail.getPageNo()},/*向page函数传  当前页数，当前页数从controller获取*/
				totalPage:${detail.getPages()},/*向page函数传  总页数，总页数从controller获取*/
				url:"${detail.getUrl()}"/*向page函数传  处理分页的controller地址*/
			});
		}) 
	</script>
</html>